<template>

 <view class="components-home">

    <tn-swiper :list="swiperList"   height="500" radius="4" :titleStyle="swiperObj" @click="routerToProductDetail" ></tn-swiper>
      
     <!-- <demo-title title="圆角方形">
        <tn-swiper :list="list"></tn-swiper>
      </demo-title> -->
      
    
      <!-- <view class="tn-padding-bottom-lg"></view> -->
	<view class="task-field task-field-unauth" v-if="taskList.length>0">
		<view class="task-row">
			<view v-for="(item,index) in taskList" :key="index" class="task-item" @click="routerTo(item)">
				<image :src="item.picture"></iamge>
				<text class="task-item-label">{{item.title}}</text>
			</view>
		</view>
		
	</view>
	<view class="task-field task-field-auth" v-if="taskList.length==0">
		
		<view class="task-row-grid task-item-auth">
			<view v-for="(item,index) in authTaskList" :key="index" class="task-item" @click="routerTo(item)">
				<image :src="item.picture"></iamge>
				<text class="task-item-label">{{item.title}}</text>
			</view>
		</view>
	</view>

	<hotProductAndDemo :list="productList" name="热门产品" @getMore="getMore(1)" @routerToDetail="(item)=>routerToDetail(item,1)"></hotProductAndDemo>
	<hotProductAndDemo :list="caseList" name="精彩案例" @getMore="getMore(2)" @routerToDetail="(item)=>routerToDetail(item,2)"></hotProductAndDemo>
	<tn-modal v-model="confirmShow" :custom="true"  @click="authModalClick" :width="auto">
		 <view class="custom-modal-content">
		 
			 <image :src="logoUrl"  mode=""></image>
			 <text class="text-tips-bold">快速验证信息，轻松开启体验</text>
			 <view class="btn-footer">
				
				 <button class="cancle" @click="confirmShow=false">取消</button>	
				<button class="form-btn" @click="routerToLogin">确认</button>
			 </view>
		   	
		  </view>
	</tn-modal>
  </view>

</template>

<script>
  import hotProductAndDemo from '@/components/hotProductAndDemo.vue'
  import {USER_INFO,ROLE_TYPE, ACCESS_TOKEN} from '@/common/util/constants.js';
  import {mapState} from 'vuex'
  export default {
    name: 'home',
    components: {hotProductAndDemo},
    data() {
      return {
		// logoUrl:'',
		confirmShow:false,
		swiperObj:{color:'#fffff',fontSize:'40rpx','text-align':'center'},
        swiperList: [
          // {image: 'https://resource.tuniaokj.com/images/swiper/spring.jpg', title: '春天'},
          // {image: 'https://resource.tuniaokj.com/images/swiper/summer.jpg', title: '夏天'},
          // {image: 'https://resource.tuniaokj.com/images/swiper/autumn.jpg', title: '秋天'},
          // {image: 'https://resource.tuniaokj.com/images/swiper/winter.jpg', title: '冬天'},
        ],
		taskList:[

			// {picture:"/static/home/product.png",title:'精选产品',url:"product"},
			// {picture:"/static/home/demo.png",title:'精选案例',url:"sample"},
			// {picture:"/static/home/activity.png",title:'我的活动单',url:"resource"},
			// {picture:"/static/home/about_us.png",title:'关于我们',},
			
		],
		authTaskList:[],
		
		productList:[
			// {picture:"../../static/blue.png",title:'冲凉赖试1',description:'精选产品1'},
			],
		caseList:[
			//{picture:"../../static/blue.png",title:'冲凉赖试1',description:'精选产品1'},
			],
		roleType:ROLE_TYPE.COMMON,
      }
    },
	computed:{
		...mapState({
			logoUrl:(state) => state.logoData.logo
		})
	},
	created(){
		console.log('created');
		const {role_id} = uni.getStorageSync(USER_INFO);
		console.log('role_id',role_id,this.roleType)
		if(role_id == 1) {
			this.roleType = ROLE_TYPE.ADMIN;
		} else {
			this.roleType = ROLE_TYPE.COMMON;
		}
		this.getSwiperData();
		this.getGuidData();
		this.getProductData();
		this.getSampleData();
		if(!this.logoUrl){
			this.getAppLogoData()
		}
	},
	onLoad(){
		console.log('onLoadhome');
		
		
	},
	mounted() {
		
	},
	onShow(){
		console.log('onShow')
	},
	onHide(){
		console.log('onHide')
	},
    methods: {
		getAppLogoData(){
			 this.$http.get('/api/system/kernel').then((res) => {
				if(res.data.status == 200) {
					
					// this.logoUrl = res.data.data.logo;
					this.$store.commit('SET_LOGO_DATA',res.data.data)
				}
			 })
		},
		getSwiperData(){
			this.$http.get('/api/advertising/select').then((res)=>{
				console.log('gaogaoaoaoaoa',res)
				if(res.data.status == 200){
					this.swiperList = res.data.data || [];
					this.swiperList.map((el)=>el.image = el.picture)
				}else {
					this.$tip.alert(res.data.message)
				}
				
			})
		},
		getProductData(){
			
			this.$http.get('/api/business/product/recommend',{limit:6}).then((res)=>{
				console.log('product',res)
				if(res.data.status == 200){
					this.productList = res.data.data||[];
				}else {
					this.$tip.alert(res.data.message)
				}
			})
		},
		getSampleData(){
			this.$http.get('/api/business/example/recommend',{limit:6}).then((res)=>{
				console.log('product',res)
				if(res.data.status == 200){
					this.caseList = res.data.data||[];
				}else {
					this.$tip.alert(res.data.message)
				}
			})
		},
		getGuidData(){
			let data = {};
			if(this.roleType == ROLE_TYPE.COMMON){
				data = {is_visitor:1}
			}
			this.$tip.loading();
			this.$http.get('/api/wechat/navigation/select',data).then((res)=>{
				console.log('navigation',res)
				if(res.data.status == 200){
					this.$tip.loaded();
					let list = res.data.data || [];
					if(this.roleType == ROLE_TYPE.COMMON){
						this.taskList = list;
					}else{
						this.authTaskList = list;
					}
					
				}else {
					this.$tip.alert(res.data.message)
				}
			})
		},
		routerTo(item){
			this.checkAuth().then((res) => {
				if(item.url.indexOf('active/index') > -1){
					//普通用户
					if(this.roleType == ROLE_TYPE.COMMON){
						this.$Router.push({name:"commonActiveCustomer"});
						return;
					}
				}
				
				this.$Router.push({path:item.url})
			},(err)=>{
				
			})
			
		},
		getMore(type){
			this.checkAuth().then((res) => {
				let url ='';
				if(type == 1) {
					url = 'product'
				}else{
					url = 'sample';
				}
				this.$Router.push({name:url})
			},(err)=>{
				
			})
		},
		routerToLogin(){
			this.$Router.replaceAll({name:'login'})
		},
		checkAuth(){
			return new Promise((resolve,reject) => {
				let token = uni.getStorageSync(ACCESS_TOKEN);
				if(token){
					resolve(true)
				} else {
					this.confirmShow = true;
					reject(false)
				}
			})
			
			
		},
		routerToProductDetail(index){
			this.checkAuth().then((res) => {
				let id = this.swiperList[index].id;
				this.$Router.push({name:'productDetail',query:{id}});
			},(err)=>{
				
			});
		},
		routerToDetail(item, type){
			console.log('routeeeeeeee',item,type,)
			this.checkAuth().then((res) => {
				let url ='';
				if(type == 1) {
					url = 'productDetail'
				}else{
					url = 'sampleDetail';
				}
				this.$Router.push({name:url,query:{id:item.id}})//只能传query,params写了也是query
			},(err)=>{
				
			})
		}
    }
  }
</script>

<style lang="scss" scoped>
	.components-home{
	.task-field-unauth{
		padding:40upx 40upx 20upx 40upx;
	}
	.task-field-auth{
		padding:40upx 80upx 20upx 80upx;
	}
	.task-field{
		
		// display:flex;
		// flex-direction: column;
		// flex-wrap: wrap;
		.task-row{
			display:flex;
			justify-content: space-evenly;
		}
		.task-row-grid{
			display: grid;
			grid-template-columns:auto auto auto;
			// grid-template-rows:102rpx 102rpx 102rpx;
			grid-row-gap: 40rpx;
			grid-column-gap: 138rpx;
		}
		.task-item{
			// margin-right: 84upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				height: 102rpx;
				width: 102rpx;
			}
			.task-item-label{
				margin-top:20rpx;
				color: #505050;
				font-size: 24rpx;
				// font-weight: ;
				// font-family: PingFang SC-Regular;
			}
		}
		// .task-item:nth-child(4n){
		// 	margin-right: 0;
		// }
		// .task-item-auth{
		// 	margin-top: 40upx;
		// }
	}
	
	}
	
	.custom-modal-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding:100rpx 100rpx 60rpx;
		image{
			width: 390rpx;
			height: 390rpx;
		}
		.text-tips-bold{
			font-size: 32rpx;
			color: #525252;
			font-weight: $Semibold;
			margin:60rpx 0 60rpx 0;
		}
		.btn-footer{
			display: flex;
		}
		// button{
		// 	height: 30rpx;
		// 	border-radius: 10rpx;
		// }
		button:first-child{
			// background-color: ;
			margin-right: 20rpx;
		}
		--btn-width:200rpx;
		.cancle {
			
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-size: 32rpx;
			border-radius: 90rpx;
			border: 2rpx solid #7D7D7D;
			color:#7D7D7D;
			background: #FFFFFF;
			box-sizing: border-box;
			cursor: pointer;
		}
	}
	
</style>
